<template>
  <div class="app-container">
    <!-- 添加或修改交班管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-flex">
        <fieldset>
          <el-row :gutter="20">
            <el-col :span="8" :xs="24">
              <el-form-item label="所属小区" prop="communityId">
                <el-select v-model="form.communityId" placeholder="请选择小区" :disabled="disabled">
                  <el-option
                    v-for="item in communityOptions"
                    :key="item.id"
                    :label="item.communityName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="交班人" prop="handPerson">
                <el-input v-model="form.handPerson" placeholder="请输入交班人" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="交班日期" prop="handTime">
                <el-date-picker clearable size="small" :disabled="disabled"
                                v-model="form.handTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择交班日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="交班区间" prop="handSection">
                <el-date-picker
                  :disabled="disabled"
                  v-model="form.handSection"
                  type="datetimerange"
                  align="right"
                  value-format="yyyy-MM-dd HH:mm"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="审核人" prop="auditPerson">
                <el-select v-model="form.auditPerson" placeholder="请选择审核人" :disabled="disabled">
                  <el-option
                    v-for="item in userOptions"
                    :key="item.nickName"
                    :label="item.nickName"
                    :value="item.nickName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-button type="primary" @click="queryForm" v-if="this.ok">查询</el-button>
            </el-col>
          </el-row>
        </fieldset>
        <fieldset>
          <el-col :span="8" :xs="24">
            <el-form-item label="收款单号" prop="skOdd">
              <el-input v-model="form.skOdd" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="收款金额" prop="skMoney">
              <el-input v-model="form.skMoney" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="付款单号" prop="fkOdd">
              <el-input v-model="form.fkOdd" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="付款金额" prop="fkMoney">
              <el-input v-model="form.fkMoney" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="交班金额" prop="handMoney">
              <el-input v-model="form.handMoney" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入内容" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </fieldset>
      </el-form>
      <fieldset>
        <legend>收款信息</legend>
        <el-table :data="handReceiptList">
          <el-table-column label="单号" align="center" prop="no"/>
          <el-table-column label="房屋名称" align="center" prop="roomName"/>
          <el-table-column label="业主名称" align="center" prop="ownerName"/>
          <el-table-column label="收款人" align="center" prop="billUser"/>
          <el-table-column label="收款日期" align="center" prop="billDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.billDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="应收金额" align="center" prop="receivableMoney"/>
          <el-table-column label="实收金额" align="center" prop="billMoney"/>
          <el-table-column label="找零金额" align="center" prop="oddChangeMoney"/>
          <el-table-column label="转存金额" align="center" prop="transferAmount"/>
          <el-table-column label="审核状态" align="center" prop="auditStatus">
            <template slot-scope="scope">
              {{ dict.label.audit_status[scope.row.auditStatus] }}
            </template>
          </el-table-column>
          <el-table-column label="开票状态" align="center" prop="invoiceStatus">
            <template slot-scope="scope">
              {{ dict.label.invoice_status[scope.row.invoiceStatus] }}
            </template>
          </el-table-column>
          <el-table-column label="单据状态" align="center" prop="documentStatus">
            <template slot-scope="scope">
              {{ dict.label.document_status[scope.row.documentStatus] }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="优惠政策" align="center" prop="preferentialId" />-->
          <el-table-column label="优惠折扣" align="center" prop="discount"/>
          <el-table-column label="备注" align="center" prop="remark"/>
        </el-table>
      </fieldset>
      <fieldset>
        <legend>付款信息</legend>
        <el-table :data="handAdviceList">
          <el-table-column label="单号" align="center" prop="no"/>
          <el-table-column label="付款人名称" align="center" prop="paymentUserName"/>
          <el-table-column label="付款日期" align="center" prop="paymentTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.paymentTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="付款金额" align="center" prop="paymentMoney"/>
          <el-table-column label="房间名称" align="center" prop="roomName"/>
          <el-table-column label="客户名称" align="center" prop="customName"/>
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ dict.label.advice_payment_status[scope.row.status] }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark"/>
        </el-table>
      </fieldset>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="this.ok">确 定</el-button>
        <el-button @click="cancel" v-if="this.ok">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getHandRecord,
    addHandRecord,
    updateHandRecord,
    onDayReceipt,
    onDayAdvanceReceipt
  } from "@/api/payfee/HandRecord";
  import {listCommunity} from "@/api/property/community";
  import {listReceipt} from "@/api/payfee/receipt"
  import {listAdvicePayment} from "@/api/payfee/advicePayment"
  import {listUser} from "@/api/system/user";
  import {listHandReceipt} from "@/api/payfee/HandReceipt"
  import {listHandAdvice} from "@/api/payfee/HandAdvice"

  export default {
    name: "HandRecordFrom",
    dicts: ['audit_state', 'audit_status', 'invoice_status', 'document_status', 'advice_payment_status',],
    props: {
      currentNode: {
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        // 表单参数
        form: {},
        communityOptions: [],
        handAdviceList: [],
        userOptions: [],
        handReceiptList: [],
        ok:true,
        // 表单校验
        rules: {
          communityId: [
            {required: true, message: "小区不能为空", trigger: "blur"}
          ],
          handNo: [
            {required: true, message: "交班单号不能为空", trigger: "blur"}
          ],
          auditPerson: [
            {required: true, message: "审核人不能为空", trigger: "blur"}
          ]
        },
        queryParams:{
          communityId:null,
          auditStatus:null,
        },
        query:{
          communityId:null,
          status:null,
        },
      };
    },
    created() {
      listCommunity().then(res => {
        this.communityOptions = res.rows;
      }),
        listUser().then(res => {
          this.userOptions = res.rows;
        })
    },
    methods: {
      queryForm() {
        this.Receipt();
        this.AdvanceReceipt();
        this.queryParams.communityId = this.form.communityId
        this.queryParams.auditStatus='10001'
        let queryParams = this.addDateRange(this.queryParams, this.form.handSection, "handSection")
        listReceipt( queryParams).then(res => {
          this.handReceiptList = res.rows;
        })

        this.query.communityId = this.form.communityId
        this.query.status='20'
        let query = this.addDateRange(this.query, this.form.handSection, "handSection")
        listAdvicePayment(query).then(res => {
          this.handAdviceList = res.rows;
        })
      },
      /**收款*/
      Receipt() {
        this.queryParams.communityId = this.form.communityId
        this.queryParams.auditStatus='10001'
        let queryParams = this.addDateRange(this.queryParams, this.form.handSection, "handSection")
        onDayReceipt(queryParams).then(res => {
          if (res.data.minDay != undefined) {
            this.form.skOdd = "起止:" + res.data.minDay + "终止:" + res.data.maxDay
            this.form.skMoney = res.data.sum
            this.form.handMoney = res.data.sum
          } else {
            this.form.skOdd = null
            this.form.skMoney = null
            this.form.handMoney = 0;
          }

        })
      },
      /**退款*/
      AdvanceReceipt() {
        this.query.communityId = this.form.communityId
        this.query.status='20'
        let query = this.addDateRange(this.query, this.form.handSection, "handSection")
        console.log(query)
        onDayAdvanceReceipt(query).then(res => {
          if (res.data.minDay != undefined) {
            this.form.fkOdd = "起止:" + res.data.minDay + "终止:" + res.data.maxDay
            this.form.fkMoney = res.data.daySum
          } else {
            this.form.fkOdd = null
            this.form.fkMoney = null
          }
          this.form.handMoney = this.form.skMoney - this.form.fkMoney

        })
      },
      show(option) {
        this.reset();
        this.handReceiptList = [];
        this.disabled = option.type == 'VIEW'
        if (option.type == 'ADD') {
          this.open = true;
          this.form.communityId = this.currentNode.id
          this.form.handPerson = this.$store.state.user.nickName;
          this.form.handTime = this.parseTime(new Date());
          this.ok=true;
          this.title = "新增交班管理";
        } else if (option.type == 'UPDATE' || option.type == 'VIEW') {
          if (option.type == 'VIEW'){
            this.ok=false;
          }
          getHandRecord(option.id).then(response => {
            this.form = response.data;
            listHandReceipt({'handRecordId': response.data.id}).then(res => {
              this.handReceiptList = res.rows;
            })
            listHandAdvice({'handRecordId': response.data.id}).then(res => {
              this.handAdviceList = res.rows;
            })
            this.form.handSection = JSON.parse(response.data.handSection);
            if (option.type == 'VIEW') {
              this.title = "查看交班管理";
            } else {
              this.title = "修改交班管理";
            }
            this.open = true;
          });

        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        let startTime = this.$utils.toDateString(new Date(), 'yyyy-MM-dd') + " 08:00"
        let endTime = this.$utils.toDateString(new Date(), 'yyyy-MM-dd') + " 23:59"
        this.form = {
          id: null,
          communityId: null,
          handNo: null,
          handPerson: null,
          handTime: null,
          handSection: [startTime, endTime],
          handMoney: null,
          auditPerson: null,
          auditState: '10',
          auditTime: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          skOdd: null,
          skMoney: null,
          fkOdd: null,
          fkMoney: null,
          handReceiptList: [],
          handAdviceList: [],
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.handSection = JSON.stringify(this.form.handSection);
            this.form.handReceiptList = this.handReceiptList
            this.form.handAdviceList = this.handAdviceList
            if (this.form.id != null) {
              updateHandRecord(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addHandRecord(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
      },
      getDetailList() {
        return this.handReceiptList;
      },
    }
  };
</script>
